<template>
	<view>
		<view class="infoBox">
			<text class="headPhoto">头像</text>
			<image class="photoImg" :src="userinfo.member_avatar"></image>
		</view>
		<view class="infoBox">
			<text class="headPhoto">昵称</text>
			<text class="infoCon">{{userinfo.member_name}}</text>
		</view>
		<view class="infoBox">
			<text class="headPhoto">账号</text>
			<text class="infoCon">{{userinfo.member_mobile}}</text>
		</view>
		<view class="infoBox">
			<text class="headPhoto">邀请码</text>
			<text class="infoCon">{{userinfo.inviter_num}}</text>
		</view>
		<view class="infoBox">
			<text class="headPhoto">地址</text>
			<text class="infoCon">{{userinfo.address}}</text>
		</view>
		<view @click="open" class="signOut">
			退出登录
		</view>
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="choseBox">
				<view class="tipsBox">
					您确定要退出登录吗？
				</view>
				<view @click="close" class="cansel">
					取消
				</view>
				<view @click="ok" class="confirem">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				photo: '../../static/user/photo.png',
				name: '鱼书',
				userinfo: ''
			};
		},
		onShow() {
			var self = this
			// this.getInfo();
			self.userinfo = uni.getStorageSync('userinfo');
			console.log(self.userinfo)
		},
		methods: {
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url: './modifyInformation'
				})
			},
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
				},
			ok(){
				this.$refs.popup.close()
				uni.removeStorage({
					key: 'loginInfo',
					success(e) {
						console.log(e)
						uni.switchTab({
							url: "../index/index"
						})
					}
				})
			}
			// getInfo() {
			// 	var self = this
			// 	Require.commonRequest({
			// 		url: '/api/member/setprofile',
			// 		success: function(ret) {
			// 			if (ret.data.code == 200) {
			// 				console.log(ret.data.data)
			// 			}
			// 		},
			// 		fail: function() {
			// 			uni.showToast({
			// 				icon: "none",
			// 				title: "网络异常，请稍后再试"
			// 			})
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	.infoBox {
		width: 680rpx;
		height: 120rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		top: 20rpx;
		margin-left: 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headPhoto {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.photoImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.infoCon {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(46, 46, 46, 1);
	}

	.signOut {
		width: 680rpx;
		height: 90rpx;
		background: rgba(229, 229, 229, 1);
		border-radius: 20rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(142, 142, 142, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 30rpx;
		left: 35rpx;
	}
	.choseBox{
		width: 680rpx;
		height: 350rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.tipsBox{
		width: 680rpx;
		height: 50rpx;
		font-size: 35rpx;
		color: #8E8E8E;
		display: flex;
		align-items: center;
		justify-content: center;
	    position: absolute;
		top: 80rpx;
	}
	.cansel{
		width: 340rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #808080;
		position: absolute;
		bottom: 10rpx;
		left: 0rpx;
	}
	.confirem{
		width: 340rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		bottom: 10rpx;
		right: 0rpx;
		border-left:1rpx solid #C0C0C0;
	}
</style>
